<template>
	<t-drawer
		:visible="visible"
		:closable="true"
		:fullscreen="true"
		@close="() => $emit('cancel')">
		<a-spin :spinning="loading" tip="启用中...">
			<a-tabs default-active-key="1" @change="callback">
				<a-tab-pane key="1" tab="全部模板">
					<div class="classify-box">
						<div :class="{'classify-item':true,'tag-selected':item.id==selectedKey}"
							v-for="(item, index) in classifyData"
							:key="index"
							@click="classifyClick(item)"
						>
							{{item.text}}
						</div>
					</div>
				</a-tab-pane>
				<a-tab-pane key="2" tab="我发布的" force-render>
					
				</a-tab-pane>
				<template slot="tabBarExtraContent">
					<a-input-search :key="pageKey" placeholder="搜索模板" style="width: 200px" @search="onSearch" />
				</template>
			</a-tabs>
			<template v-if="pageKey == 1">
				<div v-if="allListData.rows.length">
					<div class="content-box">
						<div class="content-item" v-for="item in allListData.rows">
							<div class="relative">
								<img :src="imgList[Math.round(Math.random()*4)].img" />
								<div class="mask-box">
									<div class="tooltip">
										<a-tooltip placement="bottom">
											<!-- <template slot="title">
												<span>预览</span>
											</template> -->
											<a-icon type="eye" @click="paginationPreview(item)" />
										</a-tooltip>
									</div>
									<a-button type="primary" size="large" @click="enable(item)">
										启用模板
									</a-button>
								</div>
							</div>
							<div style="padding: 16px;">
								<div class="content-title" :title="item.name">{{item.name}}</div>
								<div class="content-text" :title="item.desc">{{item.desc}}</div>
							</div>
						</div>
					</div>
					<a-pagination
						show-size-changer
						size="small"
						:current="allListData.pageNo"
						:total="allListData.totalCount"
						:page-size.sync="allListData.pageSize"
						@change="allPageChange"
						@showSizeChange="onAllShowSizeChange"
					/>
				</div>
				<a-empty v-else style="margin-top: 300px;">
					<span slot="description" style="font-size: 17px;">暂无数据</span>
				</a-empty>
			</template>
			<template v-if="pageKey == 2">
				<div v-if="myListData.rows.length">
					<div class="content-box">
						<div class="content-item" v-for="item in myListData.rows">
							<div class="relative">
								<img :src="imgList[Math.round(Math.random()*4)].img" />
								<div class="mask-box">
									<div class="tooltip">
										<a-tooltip placement="bottom">
											<!-- <template slot="title">
												<span>预览</span>
											</template> -->
											<a-icon type="eye" @click="paginationPreview(item)" />
										</a-tooltip>
									</div>
									<a-button type="primary" size="large" @click="enable(item)">
										启用模板
									</a-button>
								</div>
							</div>
							<div style="padding: 16px;">
								<div class="content-title" :title="item.name">{{item.name}}</div>
								<div class="content-text" :title="item.desc">{{item.desc}}</div>
							</div>
						</div>
					</div>
					<a-pagination
						show-size-changer
						size="small"
						:current="myListData.pageNo"
						:total="myListData.totalCount"
						:page-size.sync="myListData.pageSize"
						@change="myPageChange"
						@showSizeChange="onMyShowSizeChange"
					/>
				</div>
				<a-empty v-else style="margin-top: 300px;">
					<span slot="description" style="font-size: 17px;">你还没有发布过任何模板</span>
				</a-empty>
			</template>
			</a-spin>
		<KFormPreview ref="previewModal"></KFormPreview>
	</t-drawer>
</template>
<script>
	import KFormPreview from "@/components/TopVUI/k-form-design/packages/KFormPreview/index";
	export default {
		components: {
		  KFormPreview
		},
		props: {
			visible: {
				type: Boolean
			}
		},
		data() {
			return {
				classifyData: [],
				selectedKey: '',
				pageKey: 1,
				allQueryParam: {},
				myQueryParam: {
					code: 'currentPerson'
				},
				allPageInfo: {
					pageNo: 1,
					pageSize: 20
				},
				myPageInfo: {
					pageNo: 1,
					pageSize: 20
				},
				allListData: {
					rows: []
				},
				myListData: {
					rows: []
				},
				loading: false,
				imgList: [{
					img: "https://tianshu-vpc.oss-cn-shanghai.aliyuncs.com/5984a5a8-b2dd-4ef0-a05b-70c29a5ac3b7.jpg"
				},{
					img: "https://tianshu-vpc.oss-cn-shanghai.aliyuncs.com/4cf10a01-8632-4cc0-ad14-9f9fcd28ed7b.jpg"
				},{
					img: "https://tianshu-vpc.oss-cn-shanghai.aliyuncs.com/041daf8b-53a6-4d64-8c5e-bbaf08b56a62.jpg"
				},{
					img: "https://tianshu-vpc.oss-cn-shanghai.aliyuncs.com/c91972ff-00bd-4d8f-8adf-cda4cf1109ef.jpg"
				},{
					img: "https://tianshu-vpc.oss-cn-shanghai.aliyuncs.com/f5ab09b3-b710-42f9-a3b2-6f6598a3ac3e.jpg"
				}]
			};
		},
		mounted() {
			this.getClassifyData()
		},
		methods: {
			callback(key) {
				this.pageKey = key
				if(key == 1){
					this.getAllListData()
				}else{
					this.getMyListData()
				}
			},
			allPageChange(page, pageSize){
				this.allPageInfo = {
					pageNo: page,
					pageSize: pageSize
				}
				this.getAllListData()
			},
			myPageChange(page, pageSize){
				this.allPageInfo = {
					pageNo: page,
					pageSize: pageSize
				}
				this.getMyListData()
			},
			onAllShowSizeChange(current, size){
				this.allPageInfo = {
					pageNo: current,
					pageSize: size
				}
				this.getAllListData()
			},
			onMyShowSizeChange(current, size){
				this.allPageInfo = {
					pageNo: current,
					pageSize: size
				}
				this.getMyListData()
			},
			classifyClick(e){
				this.selectedKey = e.id
				this.allQueryParam.puuid = e.id
				this.getAllListData()
			},
			getClassifyData(){
				this.$post("/form/formModule/selectAll").then(res => {
					if(res.statusCode === 200){
						this.classifyData = res.data
						this.classifyData.unshift({
							id: '',
							text: '全部'
						})
					}
				})
			},
			getAllListData(){
				const parameters = Object.assign({},
					this.allQueryParam,
					this.allPageInfo
				);
				this.$post("/form/formBasicConfigure/getPageSet", parameters).then(res => {
					this.allListData = res
				})
			},
			getMyListData(){
				const parameters = Object.assign({},
					this.myQueryParam,
					this.myPageInfo
				);
				this.$post("/form/formBasicConfigure/getPageSet", parameters).then(res => {
					this.myListData = res
				})
			},
			onSearch(e){
				if(this.pageKey == 1){
					this.allQueryParam.name = e
					this.getAllListData()
				}else{
					this.myQueryParam.name = e
					this.getMyListData()
				}
			},
			paginationPreview(record) {
				this.$post("/form/formBasicConfigure/getDetailByUuid", {uuid: record.uuid}).then(res => {
					this.$refs.previewModal.jsonData = JSON.parse(res.formDesign.designJson);
					this.$refs.previewModal.visible = true;
				})
			},
			enable(record){
				this.loading = true
				this.$post("/form/formBasicConfigure/copyForm", {uuid: record.uuid}).then(res => {
					this.loading = false
					this.$emit('cancel')
					this.$emit("handleViewDesign",res.data)
				})
			}
		},
	};
</script>
<style lang="less" scoped="scoped">
	.classify-box {
		display: flex;
		flex-wrap: wrap;
	}

	.classify-item {
		text-align: center;
		line-height: 28px;
		border-radius: 6px;
		width: 84px;
		margin: 0 10px 10px;
		cursor: pointer;
	}
	
	.classify-item:hover{
		background: #F1F2F3;
	}
	
	.tag-selected{
		background-color: #E5E6E8 !important;
	}
	
	/deep/.ant-drawer-wrapper-body{
		background-color: #f0f2f5 !important;
	}
	
	/deep/.ant-drawer-body{
		padding: 0 !important;
	}
	
	/deep/.ant-tabs{
		background-color: #fff !important;
		padding: 24px 24px 0;
		width: 100%;
		position: absolute;
		top: 0;
		z-index: 1;
	}
	
	.content-box{
		max-width: 1180px;
		margin: 176px auto 0;
		display: flex;
		flex-wrap: wrap;
		.content-item{
			width: 24%;
			background-color: #fff;
			border-radius: 6px;
			overflow: hidden;
			margin: 0 0.5% 16px;
			cursor: pointer;
			img{
				width: 100%;
				height: 120px;
				object-fit: cover;
			}
			.content-title{
				font-size: 16px;
				line-height: 24px;
			}
			.content-text{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				-webkit-line-clamp: 2;
				font-size: 12px;
			}
		}
		// .content-item:hover{
		// 	box-shadow: 0 4px 12px rgba(0,0,0,.15);
		// }
		.content-item:hover .mask-box{
			display: block;
		}
	}
	
	.ant-pagination{
		max-width: 1180px;
		margin: 0 auto 20px;
		display: flex;
		justify-content: flex-end;
	}
	
	/deep/.ant-tabs-extra-content{
		margin-right: 50px !important;
		line-height: 0 !important;
	}
	
	.mask-box{
		display: none;
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		background-color: rgba(0,0,0,0.7);
		.tooltip{
			display: flex;
			justify-content: flex-end;
			.anticon{
				color: #fff;
				font-size: 21px;
				padding: 10px 15px 0 0;
			}
		}
		.ant-btn{
			display: block;
			margin: 15px auto 25px;
		}
	}
	
	.ant-spin-nested-loading,/deep/.ant-spin-container{
		position: static !important;
	}
</style>
